<template>
  <div>
      <h1>vuex的辅助函数法</h1>
      <h1>state使用：{{myname}}---{{myage}}---{{count}}</h1>
      <h1>getters的使用：{{countDouble}}</h1>
      <button @click="editCount(5)">触发mutations</button>
      <button @click="countAct(10)">触发actions</button>
      <hr />
      <h1>分模块state:{{myhobby}}</h1>
      <h1 v-for="item in cartListTwo">{{item.name}}---{{item.price}}</h1>
      <button @click="addMei">分模块的mutations</button>
      <button @click="addVivo">分模块的actions</button>
  </div> 
</template>

<script>
// vuex 提供了 4个赋值函数分别是mapState,mapGetters,mapActions,mapMutations

// mapState 和mapGetters将vuex中 state和getters数据注入到组件的computed计算属性使用
// mapMutations和mapActions将 vuex的Mutations和actions的函数 注入到组件的methos中使用

// vuex和localStorage 的区别、
// vuex 采用观察者模式（发布订阅模式）相比localStorage操作灵活
// 一个组件改变状态，其他组件理解改变， 相对于localStorage 要从新存储新的数组，其他组件 要获取新的数据

// vuex 缺点  
// vuex在刷新项目，数据会重新初始化
//解决  ， 使用vuex 持久化插件解决 vuex-persistedstate，  也可以手动结合localStorage 去持久化操作


import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
  name: 'Vue2304BMyMap',

  data() {
    return {
      
    };
  },
  computed:{ //将vuex中的state和getters注入到本组件的计算属性使用
     ...mapState(["count","myname","myage"]),
     ...mapGetters(["countDouble"]),
    //  将分模块的state 使用辅助函数 注入进来
    // ..mapState("分模块名",["cartList","myhobby"])
     ...mapState("tempStore",["cartList","myhobby"]),
    //  分模块的getters的注入
     ...mapGetters("tempStore",["cartListTwo"])
  },//
  mounted() {
    console.log(this.myname)
  },
  methods: { //将mutations 和actions的方法 注入到本组件的methods使用
      ...mapMutations(["editCount"]),
      ...mapActions(["countAct"]),
      //分模块的 mutations和actions的注入
      ...mapMutations("tempStore",["changeList"]),
      ...mapActions("tempStore",["listAct"]),
      addMei(){
          this.changeList({name:"魅族",price:333})
      },
      addVivo(){
          this.listAct({name:"Vivo",price:222})
      }
  },
};
</script>